<template>
<div class="login">
    <img class="login-img" src="@/assets/loginBg.png" alt="">
    <div class="l-desc">
        <p class="l-d-title">基于自主研发的工作流引擎，采用主流大数据分布式架构、并行计算框架 和深度学习框架的底层技术，包含AI能力开发、应用和管理的分布式 人工智能平台，可以满足不同业务场景下的客户需求，实现业务的智能化转型。</p>
        <div class="l-d-item">
            <p v-for="(item, i) in descList" :key="i">
                <i :class="`iconfont ${item.icon}`"></i>
                <span>{{item.desc}}</span>
            </p>
        </div>
    </div>
    <el-card>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item>
                <div class="head-title">
                    <i class="iconfont icon-denglu-logo"></i>
                </div>
            </el-form-item>
            <el-form-item prop="name">
                <el-input auto-complete="off" clearable placeholder="请输入用户名" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input auto-complete="off" clearable type="password" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="ruleForm.remember">记住我</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button class="submit" type="primary" @click="submitForm">登 录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script>
import {
    mapActions
} from 'vuex'
export default {
    name: 'login',
    data () {
        return {
            descList: [
                { icon: 'icon-webfuwu', desc: '操作简单，快速上手' },
                { icon: 'icon-webfuwu', desc: '丰富的组件算法和模型模板' },
                { icon: 'icon-webfuwu', desc: '个性化定制服务，优质的技术保障' }
            ],
            ruleForm: {
                name: 'lintao',
                password: 'lintao',
                remember: false
            },
            rules: {
                name: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                },
                {
                    pattern: /lintao/,
                    message: '用户名不正确',
                    trigger: 'blur'
                }
                ],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                },
                {
                    pattern: /lintao/,
                    message: '密码不正确',
                    trigger: 'blur'
                }
                ]
            }
        }
    },
    methods: {
        ...mapActions({
            login: 'login/getLogin'
        }),
        submitForm () {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    const {
                        name,
                        password,
                        remember
                    } = this.ruleForm
                    const params = {
                        username: name,
                        password: password,
                        rememberMe: remember
                    }
                    this.login(params).then(res => {
                        if (res) {
                            // localStorage.setItem('token', res.token || '')
                            localStorage.setItem('token', 'dddd')
                            this.$message.success('登录成功')
                            this.$router.push('/')
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less">
.login {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    background: -webkit-linear-gradient(left top, #070F1C , #263246);
    background: -o-linear-gradient(bottom right, #070F1C, #263246);
    background: -moz-linear-gradient(bottom right, #070F1C, #263246);
    background: linear-gradient(to bottom right, #070F1C , #263246);

    .l-desc {
        position: absolute;
        width: calc(80% - 360px);
        bottom: 8%;
        left: 10%;
        padding-right: 10%;
        box-sizing: border-box;
        .l-d-title {
            text-indent: 2em;
            font-size: 16px;
            color: #CDD0D5;
            line-height: 24px;
            padding-bottom: 20px;
        }
        .l-d-item p {
            display: flex;
            align-items: center;
            span {
                color: #CDD0D5;
            }
            i {
                font-size: 30px;
                color: #CDD0D5;
                margin: 0 20px;
            }
        }
    }

    .login-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 80%;
    }

    .submit {
        border-color: #ffffff;
        background: none;
    }

    .el-card {
        width: 400px;
        height: 450px;
        z-index: 2;
        background: #102848;
        position: absolute;
        bottom: 12%;
        right: 10%;
        border: none;
        .el-card__body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .head-title {
        display: block;
        text-align: center;
        width: 100%;
        margin-top: -30px;

        i {
            color: #ffffff;
            font-size: 120px;
        }
    }

    .el-checkbox {
        color: #ffffff;
    }

    .el-form-item__content {
        .el-button {
            width: 260px;
            background: #ffffff;
            color: #666666;
        }
    }
}
</style>
